<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <#include "/include/base/header.ftl">
</head>
<body>
<div class="wrapper">
    <div class="main-content">
        <div class="box box-main">
            <form id="inputForm" action="${ctx}/mall/goods/save" class="form-horizontal">
                <input type="hidden" name="id" value="${goodsInfo.id!}">
                <input type="hidden" name="pics"/>
                <input type="hidden" name="detail"/>
                <input type="hidden" name="status" value="0"/>
                <div class="box-body">
                    <div class="form-unit">基本信息</div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="control-label col-sm-2" title="">
                                    <span class="required ">*</span> 商品名称：
                                </label>
                                <div class="col-sm-10">
                                    <textarea name="name" rows="2" style="resize: none;" class="form-control required" autocomplete="off">${goodsInfo.name!}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required ">*</span> 商品价格：
                                </label>
                                <div class="col-sm-8">
                                    <input type="text" name="price" value="${goodsInfo.price!}" max="99999999" class="form-control required" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required ">*</span> 商品库存：
                                </label>
                                <div class="col-sm-8">
                                    <input type="text" name="stock" value="${goodsInfo.stock!}" max="99999999" class="form-control required" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="control-label col-sm-2" title="">
                                    <span class="required ">*</span> 商品图片：
                                </label>
                                <div class="col-sm-10">
                                    <div class="uploader">
                                        <!--用来存放图片信息-->
                                        <div class="uploader-box">
                                            <div class="uploader-list">
                                                <div class="picker">
                                                    <img src="${ctxStatic}/common/img/add.png"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="control-label col-sm-2" title="">
                                    <span class="required ">*</span> 商品详情：
                                </label>
                                <div class="col-sm-10">
                                    <div id="editor"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<#include "/include/base/footer.ftl">
<#include "/include/upload/upload.ftl">
<script>
    //保存操作
    function submitForm() {
        if($('#inputForm').valid()){
            uploader.upload();
        }
    }

    var uploader;
    var editor;
    $(function () {
        //初始化预览图片
        if('${pics}'){ initShowImage('${pics}'.split(",")); }

        //初始化上传插件
        uploader = $(".uploader").uploader({ url: '${ctx}/upload/img'});

        //上传完成事件
        uploader.on( 'uploadFinished', function() {
            var imageArray = [];
            $("input[name='upload-img-src']").each(function(){
                if($(this).val()){ imageArray.push($(this).val()); }
            })
            //图片至少需要一张
            if(imageArray.length > 0){
                $("input[name='pics']").val(imageArray.join(","));
                $("input[name='detail']").val(editor.txt.html());
                //loading
                var index = window.parent.layer.load(1, {
                    shade: [0.3,'#fff'], //0.1透明度的白色背景
                });
                $.ajax({
                    url: $("#inputForm").attr("action"),
                    type: "POST",
                    data: $('#inputForm').serialize(),
                    success: function(result){
                        window.parent.layer.close(index);
                        window.parent.layer.msg(result.msg, { time: 2000 });
                        if(result.code == "SUCCESS"){
                            window.parent.layer.closeAll();
                            window.frames.parent['iframepage'].contentWindow.search();
                        }
                    }
                })
            }else{
                window.parent.layer.msg("至少需要上传一张图片!", { time: 2000 });
            }
        })

        //初始化编辑器
        editor = new window.wangEditor('#editor');
        editor.customConfig.uploadImgShowBase64 = true;
        //上传图片
        editor.customConfig.uploadImgServer = '${ctx}/upload/img';
        editor.customConfig.uploadImgMaxLength = 10;
        // 隐藏“网络图片”tab
        editor.customConfig.showLinkImg = false;
        editor.customConfig.uploadFileName = 'file';
        // 自定义菜单配置
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'undo',  // 撤销
            'redo'  // 重复
        ];
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                insertImg(result.data);
            }
        }
        editor.create();
        editor.txt.html('${detail}');
    })
</script>
</html>